<template>
    <div id="PersonalIndex">
        <!-- 个人中心首页 -->
        <div class="Personal-header">
            <!-- 顶部标题 (公共组件) -->
            <div class="Header-wrapper">
                <yd-navbar title="个人中心" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                </yd-navbar>
            </div>
            <!-- 用户 -->
            <!-- 头像个人信息展示 -->
            <div class="information-wrapper">
                <div class="msg-portrait">
                    <div class="head-portrait">
                        <span class="portrait-box">
                              <img src="../../../../assets/img/1.png" alt="">
                            </span>
                    </div>
                    <div class="information-content">
                        <ul>
                            <li>
                                <span>姓名：{{userdata.name}}</span>
                                <span v-if='userdata.sex===2'>女</span>
                                <span v-else-if="userdata.sex===1">男</span>
                                <span v-else></span>
                                <!-- <span>20岁</span> -->
                            </li>
                            <li>手机：{{userdata.phone}}</li>
                            <li>{{userdata.deptname}}</li>
                            <li @click="esc()" class="close">退出登录</li>
                        </ul>
                    </div>
                </div>
                <div class="information-compile" @click="toBaseInformation">编辑</div>
            </div>
        </div>
         <div class="menu-wrapper">
                <div class="menu-top" @click="toSignUp">
                        <div class="menu-top-left">
                            <!-- <i class="iconfont icon-xinxitianxie"></i> -->
                            <span class="jlimg"><img src="@/assets/img/jl.png"></span>
                            <span>简历填写</span>
                        </div>
                        <div class="menu-top-right">
                            <i class="iconfont icon-more"></i>
                        </div>
                </div>
                <router-link to="worklist">
                <div class="menu-center" v-show="userdata.userType === 2">
                    <div class="menu-center-left">
                        <!-- <i class="iconfont icon-shenhe"></i> -->
                        <span class="jlimg"><img src="@/assets/img/shenhe.png"></span>
                            <span class="shenhei">简历审核
                            </span>
                            <yd-badge type="danger" class="jiaobiao heedin" v-if="this.lengthNum===0">0</yd-badge>
                            <yd-badge type="danger" class="jiaobiao" v-else-if="this.lengthNum<100">{{this.lengthNum}}</yd-badge>
                             <yd-badge type="danger" class="jiaobiao" v-else>99+</yd-badge>
                    </div>
                    <div class="menu-center-right">
                         <i class="iconfont icon-more"></i>
                    </div>
                </div>
                </router-link>
                <div class="menu-bottom" @click="goorganization">
                    <div class="menu-bottom-left">
                       <!-- <i class="iconfont icon-text_icon"></i> -->
                        <span class="jlimg"><img src="@/assets/img/pop.png"></span>
                            <span>橙人组织</span>
                    </div>
                    <div class="menu-bottom-right">
                       <i class="iconfont icon-more"></i>
                    </div>
                </div>
                <div class="menu-bottom" @click="chengrenpika">
                    <div class="menu-bottom-left">
                       <!-- <i class="iconfont icon-text_icon"></i> -->
                        <span class="jlimg"><img src="@/assets/img/card.png"></span>
                            <span>在线申领</span>
                    </div>
                    <div class="menu-bottom-right">
                       <i class="iconfont icon-more"></i>
                    </div>
                </div>
            </div>
        <Nav></Nav>
         <!-- 退出弹窗 -->
        <yd-popup v-model="show" position="center" class="tk-box">
          <div class="msg-box">
            <p style="text-align: center">
            是否退出
            </p>
            <div class="btn-msg">
              <div @click="show = false">取消</div>
              <div @click="remove()" class="rcolor">退出</div>
            </div>
          </div>
        </yd-popup>
         <!-- 退出弹窗 -->
    </div>
</template>
<script type="text/ecmascript-6">
import Nav from '../../../public/nav'
import apis from '../../../../../static/js/apis.js'
import {removeToken} from '../../../../../static/js/auth.js'
export default {
  data () {
    return {
      itemData: [],
      dataId: '',
      userdata: '',
      lengthNum: '',
      show: false
    }
  },
  methods: {
    esc () {
      // 退出
      this.show = true
    },
    remove () {
      removeToken()
      this.$router.push({
        path: '/login'
      })
    },
    toBaseInformation () {
    //   console.log()
      this.$router.push({
        name: 'BaseInformation',
        params: {
          name: this.userdata
        }
      })
    },
    toSignUp () {
      this.$router.push({
        path: '/SignUp',
        query: {
          type: '2'
        }
      })
    },
    goorganization () {
      this.$router.push({
        path: '/personal/organization'
      })
    },
    chengrenpika () {
      this.$router.push({
        path: '/personal/card'
      })
    }
  },
  created () {
    this.userdata = JSON.parse(window.localStorage.getItem('userInfo')).member
    // console.log(this.userdata)
    this.$axios.post(
      apis + '/app/jobresume/getcountList',
      this.confusion(
        JSON.stringify({
        })
      ),
      {
        headers: {
          Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
          'Content-Type': 'application/json;charset=UTF-8',
          'Cache-Control': 'no-cache',
          isApp: 'isApp'
        }
      }
    )
      .then(response => {
        this.lengthNum = response.data
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
  },
  components: {
    Nav,
    apis
  }
}
</script>
<style scoped>
    .btn-msg {
    width: 200px;
    overflow: hidden;
    margin: 20px auto;
    }
    .btn-msg div {
    float: left;
    width: 45%;
    text-align: center;
    border-radius: 10px;
    background: #b3b3b3;
    color: #fff;
    height: 25px;
    line-height: 25px;
    margin: 0 5px;
    }
    .btn-msg .rcolor {
    background: #ff5b5b;
    }
    .msg-box {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
    }
    .tk-box {
    width: 90%;
    z-index: 8;
    background: #fff;
    }
    .icon-back {
        font-size: 24px;
    }
    .Fcolor {
        color: #fff;
    }
    .user-wrapper {
        display: flex;
        position: relative;
        height: 141px;
        width: 100%;
        align-items: center;
        background: #f2f2f2;
        overflow: hidden;
    }
    .information-wrapper {
        width: 100%;
        height: 132px;
        padding: 24px 12px;
        display: flex;
        justify-content: space-around;
        background: #f2f2f2;
        overflow: hidden;
    }
    .msg-portrait {
        flex: 8;
    }
    .head-portrait {
        margin-right: 15px;
        float: left;
    }
    .head-portraiton {
        margin-right: 55px;
        float: left;
    }
    .portrait-box {
        display: block;
        width: 70px;
        border-radius: 50%;
        line-height: 70px;
        text-align: center;
        overflow: hidden;
        margin-top: 5px;
        height: 70px;
    }
    .head-portrait img {
        width: 100%;
        border-radius: 50%;
        height: 100%;
    }
    .information-content {
        width: 150px;
        float: left;
    }
    .information-content ul {
        color: #333;
        width: 100%;
        line-height: 24px;
        font-size: 14px;
    }
    .information-compile {
        width: 41px;
        height: 21px;
        color: #fff;
        line-height: 21px;
        background-color: #ffd602;
        text-align: center;
        border-radius: 7%;
        flex: 2;
    }
    .fsize {
        font-size: 70px;
        color: #ffd602;
    }
    .span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 80px;
        text-align: center;
    }
    .menu-wrapper{
        position: absolute;
        top: 171px;
        bottom: 51px;
        background-color: #fff;
        width: 100%;
        padding: 0 12px 0 12px;
        box-sizing: border-box;
    }
    .menu-top,.menu-center,.menu-bottom{
        height: 58px;
        border-bottom: 1px solid #f2f2f2;
        line-height: 58px;
        box-sizing: border-box;
        /* padding: 0 0 0 12px; */
        display: flex;
        font-size: 14px;
        font-size: 0;
    }
    .menu-top-left,.menu-center-left,.menu-bottom-left{
        flex: 8;
    }
    .menu-top-left span,.menu-center-left span,.menu-bottom-left span{
        font-size: 14px;
        margin-top: -2px;
        vertical-align: 4px;
    }
    .menu-top-right,.menu-center-right,.menu-bottom-right{
        flex: 2;
        text-align: right;
    }
    .icon-more{
        font-size: 18px;
        color: #e1e1e1;
    }
    .heedin{
        display: none;
    }
    .menu-top-left .jlimg{
        overflow: hidden;
        width: 25px;
        height: 0;
        padding-bottom: 35px;
        margin-right: 10px;
        float: left;
        margin-top: 8px;
    }
    .menu-center-left .jlimg{
        overflow: hidden;
        width: 23px;
        height: 0;
        padding-bottom: 35px;
        margin-right: 10px;
        float: left;
        margin-top: 8px;
    }
    .menu-bottom-left .jlimg{
        overflow: hidden;
        width: 23px;
        height: 0;
        padding-bottom: 35px;
        margin-right: 10px;
        float: left;
        margin-top: 8px;
    }
    .jlimg img{
        width: 100%;
    }
    .jiaobiao{
        left: 4px;
        font-size: 10px;
    }
    .close{
        margin-top: 5px;
        color:red;
    }
</style>
